<template>
  <app-container>
    <app-block>
      <el-tabs v-model="form.tabType" @tab-click="onReset" class="wp100 vm">
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in CUSTOMER_TAB"
          :key="index"
        />
      </el-tabs>
      <zm-form :model="form" ref="searchForm" :rules="Rules" inline>
        <zm-form-item label prop="customerName">
          <zm-input
            class="w200"
            v-model="form.customerName"
            placeholder="输入客户名称"
          />
        </zm-form-item>
        <zm-form-item label prop="tradeType">
          <zm-data-select
            v-model="form.tradeType"
            api="getDictList"
            :params="{ type: 'tradeType' }"
            multiple
            str
            placeholder="客户行业"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerType">
          <zm-data-select
            v-model="form.customerType"
            k1="customerType"
            placeholder="客户类型"
            class="w200"
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerStar">
          <zm-data-select
            v-model="form.customerStar"
            :list="CUSTOMER_STAR"
            label-name="label"
            placeholder="客户级别"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="accountIds" v-if="[1, 3].includes(+form.tabType)">
          <el-cascader
            placeholder="业务员"
            :props="props"
            collapse-tags
            v-model="form.accountIds"
            :options="accountList"
            clearable
            class="w200"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb15">
        <zm-button @click="onAdd" t="add"></zm-button>
        <zm-button type="warning" @click="onGetFields">
          导出
        </zm-button>
        <zm-export
          ref="export"
          :api="exportApi()"
          type="warning"
          :params="exportForm"
          v-show="false"
        ></zm-export>
        <zm-button
          @click="onTransfer"
          t="submit"
          custtxt="转移客户"
        ></zm-button>
        <zm-button @click="onMove" t="submit" custtxt="移入公海"></zm-button>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
        config-header
        :store-key="SOTRE_KEY_CUSTOMER_LIST"
      ></zm-table-data>
    </app-block>
    <new-panel
      :obj="newParams.obj"
      v-model="newParams.visible"
      v-if="newParams.visible"
      @after="onSearch"
    ></new-panel>
    <transfer-customer
      v-if="transParams.visible"
      v-model="transParams.visible"
      :nos="selectedNos"
      :p-title="transParams.pTitle"
      :trans="transParams.trans"
      @after="onSearch"
    ></transfer-customer>
    <detail-customer
      v-if="detailParams.visible"
      v-model="detailParams.visible"
      :obj="detailParams.obj"
      :id="detailParams.id"
      @after="onSearch"
    ></detail-customer>
    <export-panel
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      @after="onExport"
      type="2"
    ></export-panel>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { CUSTOMER_TAB, CUSTOMER_STAR } from '@/model/type'
import { columns } from './const'
import {
  getPageList,
  deleteCheck,
  checkHasOrder,
  getExportField,
  exportCustomer
} from '@/api/src/customer'
import api from '@/api'
import NewPanel from './components/New'
import TransferCustomer from './components/transferCustomer'
import ExportPanel from '@/components/exportFields'
import DetailCustomer from './components/detail'
import { SOTRE_KEY_CUSTOMER_LIST } from '@/model/tableStoreKey'
import {getAccountList} from '@/api/src/public'

export default {
  name: 'CustomerList',
  components: { NewPanel, TransferCustomer, DetailCustomer, ExportPanel },
  mixins: [tableMixin],
  data () {
    return {
      CUSTOMER_TAB,
      CUSTOMER_STAR,
      SOTRE_KEY_CUSTOMER_LIST,
      form: {
        tabType: '1',
        customerName: '',
        tradeType: '',
        customerType: '',
        customerStar: '',
        accountIds: ''
      },
      selectedNos: '',
      newParams: {
        visible: false,
        obj: {}
      },
      transParams: {
        visible: false,
        pTitle: '',
        trans: false
      },
      detailParams: {
        visible: false,
        id: '',
        obj: {}
      },
      exportForm: {},
      exportParams: { visible: false },
      Rules: {},

      accountList: [],
      props: {
        label: 'name',
        value: 'id',
        multiple: true,
        children: 'accountData'
      }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {
    // 数据简报 详情 新增客户数 跳转 客户列表页
    if (this.$route.query && this.$route.query.departmentId && this.$route.query.accountId) {
      this.form.accountIds = [this.$route.query.departmentId, this.$route.query.accountId]
    }
    this.init()
  },
  methods: {
    async init () {
      this.accountList = await getAccountList()
    },
    exportApi () {
      return exportCustomer
    },
    exportField () {
      return getExportField
    },
    async loadList () {
      this.initialTableData([], 0)
      console.log(this.form.accountIds)
      let accountIds = []
      if (this.form.accountIds) {
        this.form.accountIds.map(item => {
          accountIds.push(item[1])
        })
        accountIds = accountIds.join(',')
      } else {
        accountIds = ''
      }
      // accountIds = (this.form.accountIds && this.form.accountIds[1]) || ''
      const res = await getPageList(this.assignQuery({ ...this.form, ...{accountIds: accountIds} }))
      this.initialTableData(res.list, res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    onAdd () {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        obj: row,
        id: row.id
      }
    },
    async onDel (row) {
      deleteCheck({ id: row.id }).then(res => {
        if (!res.isCan) {
          this.$message.error(res.tipMessage)
          return
        }
        this.$confirm('是否确认删除该客户?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await api.customer.delete({ id: row.id })
            this.$message.success('删除成功')
            this.onSearch()
          })
          .catch(() => {})
      }).catch(e => {
        console.log(e.content)
      })
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    onExport (fields) {
      const accountIds = (this.form.accountIds && this.form.accountIds[1]) || ''
      this.exportForm = {
        ...this.form,
        ...{ ids: this.selectedNos },
        ...{ fields: fields },
        ...{ accountIds: accountIds }
      }
      console.log(this.exportForm)
      this.$refs.export.onExport()
    },
    onTransfer () {
      if (!this.selectedNos) {
        this.$message.warning('请先选择客户')
        return
      }
      checkHasOrder({ customerIds: this.selectedNos }).then(r => {
        // isCan true可以操作，false不可操作
        if (r.isCan) {
          this.transParams = {
            visible: true,
            pTitle: '转移客户',
            trans: true
          }
        } else {
          this.$alert(
            '您选择的客户,含有未全部回款的销售单,请先督促回款在进行转移操作!',
            '转移客户',
            { confirmButtonText: '确定' }
          )
        }
      })
    },
    onMove () {
      if (!this.selectedNos) {
        this.$message.warning('请先选择客户')
        return
      }
      checkHasOrder({ customerIds: this.selectedNos }).then(r => {
        // isCan true可以操作，false不可操作
        if (r.isCan) {
          this.transParams = {
            visible: true,
            pTitle: '移入公海',
            trans: false
          }
        } else {
          this.$alert(
            '您选择的客户，含有未全部回款的销售单，请先督促回款再进行移入公海操作！',
            '移入公海',
            { confirmButtonText: '确定' }
          )
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
